<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>补签申请</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.apply {
			width: 100vw;
			height: calc(100vh - 40px);
		}

		.info {
			width: 96%;
			margin-right: 2%;
			padding-left: 10px;
			margin-top: 15px;
		}

		.title {
			width: 80px;
			font-size: 16px;
			font-weight: bold;
			display: inline-block;
		}

		select,
		input,
		textarea {
			width: calc(100% - 7.5em);
			height: 35px;
		}

		textarea {
			min-height: 250px;
		}

		.title,
		textarea {
			vertical-align: top;
		}

		.button {
			height: 50px;
			width: 100%;
			position: absolute;
			bottom: 0;
			font-size: 20px;
			font-weight: bold;
			letter-spacing: 5px;
			color: white;
			line-height: 50px;
			text-align: center;
			background-color: green;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">补签申请</div>
		<img src="image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div class="apply" id="vue-root">
		<div class="info">
			<div class="title">补签项目：</div>
			<select v-model="item.type" disabled="disabled">
				<option :value="0">考勤</option>
				<option :value="1">校车</option>
				<option :value="2">打卡</option>
			</select>
		</div>
		<div class="info" v-if="!isTeacher">
			<div class="title">补签时间：</div>
			<input type="datetime-local" placeholder="请选择补签时间" v-model="item.time">
		</div>
		<div class="info">
			<div class="title">补签原因：</div>
			<textarea placeholder="请填写补签原因，可为空!" v-model="item.reason"></textarea>
		</div>
		<div class="info" v-if="!isTeacher">
			<div class="title" ></div>
			<button @click="submit">提交</button>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>


	<script>

		new Vue({
			el: '#vue-root',
			data: {
				isTeacher: isTeacher(),

				item: {
					type: params().type || 0,
					time: dayjs().format('YYYY-MM-DDTHH:mm'),
					studentId: params().studentId
				}
			},
			methods: {
				submit: function () {
					if (!this.item.time) {
						alert('请选择补签时间');
						return;
					}
					var url = this.isTeacher ? '/t/punch' : '/s/punch';
					axios.post(url, this.item).then(function (res) {
						alert('提交成功');
						history.back();
					});
				}
			}
		});

	</script>

</body>

</html>